import { defineStore } from 'pinia'

export const useWorkStore = defineStore('work', () => {
  // 作品数据状态
  const works = ref([
    {
      id: 1,
      title: '待办清单',
      description: '采用Vue3 + Element Plus技术栈构建，提供了直观的待办事项管理和完成状态跟踪功能，帮助用户高效组织日常任务',
      fullDescription: `核心功能：
支持添加任务、删除任务、标记任务完成状态等基础功能
支持回车快速添加任务，提升用户操作效率
使用localStorage自动保存与加载数据，刷新页面数据不丢失
实时显示已完成任务与总任务数量，直观反馈进度
任务项添加删除拥有滑入滑出动画
任务项悬停拥有微移动和高亮效果
底部操作栏提供全选、取消全选、清除已完成等快捷功能
`,
    },
    {
      id: 2,
      title: '贪吃蛇游戏',
      description: '基于Vue3 + Canvas实现的贪吃蛇游戏，融合渐进式难度系统、动态视觉反馈与流畅交互体验',
      fullDescription: `核心功能：
支持方向键控制蛇的移动，操作简单直观
吃到食物增加分数，分数足够则等级提升
等级称号拥有独特的颜色样式，直观区分等级，等级提升蛇身颜色随之变化
游戏速度随等级提升而逐渐加快，增加游戏难度
支持空格键或按钮暂停/继续游戏，方便用户灵活控制游戏节奏
实时显示当前分数、等级和等级称号，提供进度反馈
游戏结束时展示最终成绩，支持重新开始或退出游戏
游戏界面采用网格背景，提升视觉体验
蛇头设计包含眼睛，方向变化时眼睛位置相应调整

实现思路：
使用Canvas元素作为游戏渲染画布，通过2D上下文绘制游戏界面
使用Vue 3的ref响应式数据管理游戏状态（蛇的位置、食物位置、分数、等级等）
游戏循环：通过setInterval实现固定帧率的游戏更新机制
使用数组存储蛇身体的每个部分的坐标 {x, y}
蛇的移动通过添加新头部、删除尾部实现，吃到食物时只添加头部不删除尾部实现增长
方向控制采用direction和nextDirection双变量机制，确保方向转换平滑且符合物理逻辑（防止180度转向）
随机生成食物位置，使用do-while循环确保食物不会出现在蛇身上
碰撞检测包括：
边界碰撞：检查蛇头是否超出画布范围
自身碰撞：检查蛇头是否与身体其他部分重叠
食物碰撞：检查蛇头是否与食物位置重合
`,
    },
    {
      id: 3,
      title: '俄罗斯方块小游戏',
      description: '基于Vue3 + Canvas实现的经典俄罗斯方块小游戏，集成高级游戏机制（墙踢算法、方块预览）',
      fullDescription: `核心功能：
支持方向键控制方块移动和旋转
包含7种经典俄罗斯方块形状（I、J、L、O、S、T、Z）
拥有预览下一个方块的功能
实时显示当前分数、等级和消除行数
随着等级提升，游戏速度逐渐加快
支持暂停/继续游戏功能
游戏结束时展示最终成绩，支持重新开始或退出游戏
方块设计包含高光和阴影效果，提升视觉体验

实现思路：
使用Canvas绘制主游戏区域和下一个方块预览区域
使用Vue 3的ref管理游戏状态（游戏板、当前方块、分数、等级等）
通过setInterval实现方块自动下落机制
预定义7种经典俄罗斯方块形状（I、J、L、O、S、T、Z），每种形状使用对应特定颜色和二维矩阵表示
碰撞检测涵盖：边界碰撞、与已锁定方块的碰撞
实现**墙踢(WalKick)**机制，使方块在边界附近也能顺利旋转
当方块无法继续下落时，将其锁定到游戏板上
自动检测并消除完整的行
实现经典俄罗斯方块计分规则，根据消除行数和当前等级计算分数
累计消除行数达到一定值时自动升级，并提高游戏速度
单独的Canvas区域用于显示即将出现的下一个方块
`,
    },
    {
      id: 4,
      title: '搜索Github用户',
      description: '基于Vue3 + Element Plus + axios构建的GitHub用户搜索工具，支持实时搜索、分页展示和用户资料快速访问',
      fullDescription: `核心功能：
支持输入GitHub用户名进行实时搜索，按回车键或点击搜索按钮触发
使用axios通过GitHub API获取用户数据，请求一次数据存入数组，展示时从数组中读取
支持分页显示搜索结果，支持10/20/50条每页的切换
搜索结果以卡片形式展示，包含用户头像和用户名
用户卡片支持鼠标悬停交互效果，点击卡片可跳转至用户GitHub主页
包含完整的状态管理：未搜索、加载中、搜索成功、无结果和请求失败状态
完善的错误处理机制，包括API速率限制、网络错误、服务器错误等情况
`,
    },
  ])

  // 根据ID获取单个作品
  const getWorkById = (id) => {
    return works.value.find(work => work.id === id)
  }





  // 导出状态和方法
  return {
    works,
    getWorkById,
  }
})